import React, { useState } from 'react'
import { Rate } from 'antd'
import { connect } from 'umi'

type Props = {
    title: string,
    prop: string,
    hero: any,
    dispatch: any
}

function Star({ title, prop, hero, dispatch }: Props) {
    const [value, setValue] = useState(0)
    const desc = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    function handleChange(val: number) {
        setValue(val)
        dispatch({ type: "hero/setProps", val, prop, scores: true })
    }
    return (
        <div className='banner_flex mt15'>
            <span>
                { title }
            </span>
            <Rate count={10} onChange={handleChange} />
            <span style={{
                lineHeight: "32px"
            }} className="ant-rate-text">
                { value ? desc[value - 1]: '' }
            </span>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

export default connect(mapStateToProps)(Star)